<template>
  <div class="container">
    <h3>当前城市</h3>
    <button>{{ cityName.replace('市', '') }}</button>
    <h3>定位/最近访问</h3>
    <div>
      <button class="location" @click="handleClick(thisCity)">
        <i class="fa-solid fa-location-dot"></i> {{ thisCity }}
      </button>
      <button
        @click="handleClick(city)"
        v-for="city in seachCity"
        :key="city.id"
      >
        {{ city.name }}
      </button>
    </div>
    <h3>热门城市</h3>
    <div>
      <button @click="handleClick(city)" v-for="city in cities" :key="city.id">
        {{ city.name }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useOlMapStore } from '@/stores/olMap'
const { cityName, thisCity, seachCity, cities } = storeToRefs(useOlMapStore())
const { handleClick } = useOlMapStore()
onMounted(() => {
  if (localStorage.getItem('seachCity')) {
    seachCity.value = JSON.parse(localStorage.getItem('seachCity'))
  }
  $.ajax({
    url: 'http://39.103.151.139:8000/city',
  }).then((res) => {
    cities.value = res.data.hotCities
  })
})
</script>

<style scoped>
.container {
  padding: 10px;
  width: 500px;
  height: 100vh;
  border: 1px solid #d3d3d3;
  margin: 0 auto;
}
.container h3 {
  text-indent: 15px;
  line-height: 40px;
  color: #666;
  font-size: 16px;
  font-weight: lighter;
  background-color: #efeeee;
  margin-top: 6px;
}
.container button {
  width: 80px;
  height: 35px;
  background-color: #fff;
  margin-right: 10px;
  border: 1px solid #c2c0c0;
  border-radius: 10px;
  margin-top: 6px;
}
.container button:hover {
  cursor: pointer;
  background-color: #cecccc;
}
.fa-solid {
  color: blue;
  font-size: 18px;
}
</style>
